<template>
	<mescroll-uni :down="downOption" @down="downCallback" :up="upOption">
		<view class="rank-list">
			<view class="rank-item" v-for="(item,index) in rankList" :key="index" @tap="goRankDetail(item.id)">
				<view class="icon">
					<image class="img" :src="item.coverImgUrl" lazy-load="true" mode="scaleToFill"></image>
				</view>
				<view class="songlist">
					<view class="song-item" v-for="songitem in item.top" :key="songitem.id">
						<text class="song">{{ songitem.name }}</text>
						<text class="name">{{ songitem.ar[0].name }}</text>
					</view>
				</view>
			</view>
		</view>
	</mescroll-uni>
</template>

<script>
	import MescrollUni from "../../common/mescroll-uni/mescroll-uni.vue";
	export default {
		components:{
			MescrollUni	
		},
		data () {
			return {
				// 下拉刷新的配置
				downOption: { 
					use: true, // 是否启用下拉刷新; 默认true
					auto: true, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
				},
				//上拉加载配置
				upOption: {
					use: false
				},
				rankList:[]
			}
		},
		// onLoad() {
		// 	this.getRankList()
		// },
		methods:{
			getRankList(mescroll){
				let idxArr = [0,1,2,3,4,22,23]
				let rankArr = []
				for(let i = 0 ; i < idxArr.length ; i++){
					uni.request({
						url: `http://47.100.48.11:4000/top/list?idx=${idxArr[i]}`,
						success: (res) => {
							if(res.data.code == 200){
								let list = res.data.playlist
								list.top = res.data.playlist.tracks.slice(0, 3)
								rankArr.push(list)
								this.rankList=rankArr
								// 成功隐藏下拉加载状态
								setTimeout(()=>{
									mescroll.endSuccess()
								},2000)
							}
						},
						fail: () => {
							// 失败隐藏下拉加载状态
							 mescroll.endErr()
						}
					})
				}
			},
			downCallback(mescroll){
				this.getRankList(mescroll)
			},
			upCallback(){
				console.log('继续拉啊！！！')
			},
			goRankDetail(id){
				uni.navigateTo({//页面跳转
					url: `/pages/rank/rankDetail?id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.rank-list{
		.rank-item{
			display: flex;
			justify-content: space-around;
			padding: 5upx 10upx;
			border-bottom: 1upx solid #e4e4e4;
			.icon{
				width: 200upx;
				height: 200upx;
				.img{
					width: 100%;
					height: 100%;
					border-radius: 15upx;
				}
			}
			.songlist{
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				height: 200upx;
				overflow: hidden;
				.song-item{
					line-height: 60upx;
					height: 60upx;
					.song{
						font-size: 28upx;
						margin-left: 20upx;
					}
					.name{
						font-size: 28upx;
						margin-left: 5upx;
					}
				}
			}
		}
	}
</style>
